<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章发布</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/new-article.css">
    <script type="text/javascript" src="/plugins/ueditor-plus/ueditor.config.js"></script>
    <script type="text/javascript" src="/plugins/ueditor-plus/ueditor.all.js"></script>
    <script type="text/javascript" src="/plugins/ueditor-plus/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/new-article.js"></script>
</head>
<body>
<div class="header">
    <div class="left">
        <span class="iconfont">&#xe895;我的草稿
            <div class="drafted-num">6</div>
        </span>
    </div>
    <div class="mid">
        <span>UEditor</span>
    </div>
    <div class="right">
        <span class="publish" data-bs-toggle="modal" data-bs-target="#publishArticleModal" onclick="createArticle(0)">发表</span>
    </div>
</div>
<div class="main">
    <input class="article-header" placeholder="请输入文章标题"></input>
    <div class="ue">
        <script id="editor" type="text/plain" style="height:300px;">
            这是我的初始化内容
        </script>
    </div>
</div>

<div class="modal fade" id="publishArticleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body clearfix">
                <div class="publish-left fl">
                    <div class="upload-header-image">
                        <label for="xFile">
                            <image src="/images/image-upload.png"></image>
                        </label>
                    </div>
                    <div class="upload-header-button">
                        <label for="xFile">本地上传</label>
                        <form>
                            <input type="file" id="xFile" accept="image/*" style="display: none">
                        </form>
                    </div>
                    <div class="random-header" onclick="randomHeaderImage()">随机封面</div>
                    <div class="upload-desc">
                        请上传200*200px，小于等于80KB的PNG/JPG/GIF图片
                    </div>
                </div>
                <div class="publish-right fl">
                    <div class="article-columns clearfix">
                        <div class="article-columns-left fl">
                            <div class="article-label-name">投递栏目</div>
                            <div class="article-label-value" onclick="showArticleLabelList()">
                                <span>请选择需要投递的栏目</span>
                                <span class="iconfont">&#xe6b5;</span>
                                <div class="article-label-list" style="display: none;">
                                    <ul>
                                        {% for label_name, label_value in label_types.items() %}
                                        <li data-label-type="{{label_name}}"
                                            class="{{label_value.selected}}"
                                            onclick="selectLabelName('{{label_name}}','{{label_value.name}}')">
                                            {{label_value.name}}
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="article-columns-right fl">
                            <div class="article-type-name">文章类型</div>
                            <div class="article-type-value" onclick="showArticleTypeList()">
                                <span>请选择</span>
                                <span class="iconfont">&#xe6b5;</span>
                                <div class="article-type-list" style="display: none;">
                                    <ul>
                                        {% for article_types_name, article_types_value in article_types.items() %}
                                        <li data-article-type="{{article_types_name}}"
                                            class="{{article_types_value.selected}}"
                                            onclick="selectArticleType('{{article_types_name}}','{{article_types_value.name}}')">
                                            {{article_types_value.name}}
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="article-tags">
                        <div class="article-tag-name">
                            <span>文章标签</span>
                            <span>
                                <span class="tag-num">0</span>
                                <span>/</span>
                                <span>3</span>
                            </span>
                        </div>
                        <div class="article-tag-value clearfix">
                            <div class="change-tags fl">
<!--                                <span>Python</span>-->
<!--                                <span>Js</span>-->
                            </div>
                            <input class="fl" type="text" placeholder="请输入或选择下列标签">
                        </div>
                        <script>window.globalArticleTags = {{article_tags | safe }}</script>
                        <div class="article-tag-list">
                            {% for article_tag in article_tags %}
                            <span onclick="addTag('{{article_tag}}')">{{article_tag}}</span>
                            {% endfor %}
                        </div>
                    </div>
                    <button class="saveAndCancelBtn" onclick="createArticle(0)">保存并取消</button>
                    <button class="publishBtn" onclick="createArticle(1)">确定发布</button>
                </div>

            </div>
        </div>
    </div>
</div>

</body>
</html>